<template>
  <div
    ref="containerRef"
    class="mt-[0.375rem] bg-[#201f1c] rounded-sm py-[6.56vw] px-[5.6vw] md:p-[1.5rem] md:flex md:gap-[0.25rem] lg:px-[clamp(1.375rem,0.125rem+1.9531vw,2rem)] lg:py-[clamp(2rem,0rem+3.125vw,3rem)] lg:gap-[3rem]"
  >
    <div class="md:grid md:items-center md:content-center lg:order-2">
      <div class="text-3xl leading-[1.26] lg:text-[clamp(2rem,0rem+3.125vw,3rem)]">
        <p>AI 灵感成片</p>
        <p>摄影师构图</p>
        <p>轻松出好片</p>
      </div>

      <p
        class="mt-[1.375rem] text-base md:mt-[1rem] lg:text-[clamp(0.75rem,0rem+1.1719vw,1.125rem)]"
      >
        深度学习海量摄影师作品，智能推荐超绝构图和滤镜，一键让原片妙手回春，秒变有范儿的大作。
      </p>
    </div>

    <div
      class="grid grid-cols-2 grid-rows-[56.75vw] gap-[0.37rem] max-md:mt-[1.75rem] md:grid-cols-[repeat(2,26.4vw)] md:grid-rows-[38.8vw] lg:order-1 lg:grid-cols-2 lg:grid-rows-1 lg:w-[83%] lg:aspect-[11/8] lg:gap-[clamp(0.375rem,0.125rem+0.3906vw,0.5rem)]"
    >
      <div class="relative">
        <img
          class="w-full h-full object-cover"
          loading="lazy"
          src="@/views/product/reno14-pro/image/4/images-live-4-c1-1-mo-1.jpg.webp"
          alt=""
        />
        <div
          class="text-xs absolute bottom-[4%] left-0 right-0 mx-auto bg-white rounded-full text-black w-max px-[0.75rem] py-[0.375rem] lg:text-sm"
        >
          自动构图前
        </div>
      </div>
      <div class="relative">
        <img
          class="w-full h-full object-cover"
          loading="lazy"
          src="@/views/product/reno14-pro/image/4/images-live-4-c1-2-mo-1.jpg.webp"
          alt=""
        />
        <div
          class="text-xs absolute bottom-[4%] left-0 right-0 mx-auto bg-white rounded-full text-black w-max px-[0.75rem] py-[0.375rem] lg:text-sm"
        >
          自动构图后
        </div>
      </div>
    </div>
  </div>
</template>
